import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

import styles from './style';
import IconFont from './../../assets/iconfont';

import { color } from 'react-native-tailwindcss';

function QueryHeader() {
  const [searchKeyword, setSearchKeyword] = useState('');

  return (
    <View style={styles.queryHeader}>
      <View style={styles.queryHeaderPosition}>
        <IconFont name="icon-map" size="18" color={color.white} />
        <Text style={styles.queryPositionName}>成都</Text>
      </View>
      <View style={styles.queryHeaderSearch}>
        <View style={styles.querySearchLeft}>
          <IconFont name="icon-search" size="18" color="#ccc" />
        </View>

        <TextInput
          style={styles.querySearchInput}
          placeholderTextColor="#d5d5d5"
          placeholder="请输入VIN码/商品名称"
          onChangeText={text => setSearchKeyword(text)}
          value={searchKeyword}
        />
        <View style={styles.querySearchRight}>
          <IconFont name="icon-saomiao" size="16" color={color.fontGray2} />
          <View style={styles.querySearchLine} />
          <Text style={styles.querySearchText}>搜索</Text>
        </View>
      </View>
    </View>
  );
}

export default QueryHeader;
